<template>
	<div>
		<a-tabs default-active-key="styles" size="small">
			<a-tab-pane key="styles" :tab="i18n('componentStyle.style','风格')">
				<component-style :curComponent="curComponent"></component-style>
				<!--文本数据风格-->
				<a-collapse default-active-key="1" :bordered="false">
					<template #expandIcon="props">
                        <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
					</template>
					<a-collapse-panel key="1" :header="realTimeI18n('timeStyle','时间样式')">
                        <a-form layout="vertical">
                            <a-row :gutter="24" style="margin: 0px">
                                <a-col :span="12">
                                    <a-form-item :label="i18n('componentStyle.fontSize','字体大小')">
                                        <a-input-number style="width: 100%" v-model:value="config.dataSources.fontSize" :min="12" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item :label="i18n('componentStyle.fontColor','字体颜色')">
                                        <a-input style="width: 100%" v-model:value="config.dataSources.titleColor" type="color" :placeholder="i18n('componentStyle.titleColor','标题颜色')"/>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="24" style="margin: 0px">
                                <a-col :span="12">
                                    <a-form-item :label="i18n('componentStyle.fontThickness','字体粗细')">
                                        <a-select default-value="no" v-model:value="config.dataSources.fontWeight" style="width: 100%">
                                            <a-select-option value="bold">
                                                {{i18n('componentStyle.bold','加粗')}}
                                            </a-select-option>
                                            <a-select-option value="normal">
                                                {{i18n('componentStyle.normal','正常')}}
                                            </a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item :label="i18n('componentStyle.alignmentMode','对齐方式')">
                                        <div class="componentStyle-textAlign">
                                            <div class="componentStyle-textAlign-icon"
                                                 @click="config.dataSources.textAlign='left'"
                                                 :class="[config.dataSources.textAlign=='left'?'componentStyle-textAlign-hover':'']">
                                                <rx-icon-show icon="icon-linezuoduiqi2"/>
                                            </div>
                                            <div class="componentStyle-textAlign-icon"
                                                 @click="config.dataSources.textAlign='center'"
                                                 :class="[config.dataSources.textAlign=='center'?'componentStyle-textAlign-hover':'']">
                                                <rx-icon-show icon="icon-linejuzhongduiqi2"/>
                                            </div>
                                            <div class="componentStyle-textAlign-icon"
                                                 @click="config.dataSources.textAlign='right'"
                                                 :class="[config.dataSources.textAlign=='right'?'componentStyle-textAlign-hover':'']">
                                                <rx-icon-show icon="icon-lineyouduiqi2"/>
                                            </div>
                                        </div>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
					</a-collapse-panel>
				</a-collapse>
			</a-tab-pane>
			<a-tab-pane key="dataSources" :tab="i18n('componentStyle.data','数据')">
				<a-form layout="vertical">
					<a-form-item :label="realTimeI18n('timeFormat','时间格式')">
						<a-select style="width:100%" v-model:value="config.dataSources.format">
							<a-select-option value="YYYY-MM-DD">YYYY-MM-DD</a-select-option>
							<a-select-option value="YYYY-MM-DD HH:mm:ss">YYYY-MM-DD HH:mm:ss</a-select-option>
							<a-select-option value="YYYY/MM/DD">YYYY/MM/DD</a-select-option>
							<a-select-option value="YYYY/MM/DD HH:mm:ss">YYYY/MM/DD HH:mm:ss</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item :label="realTimeI18n('showDay','显示星期几')" >
						<a-switch size="small" v-model:checked="config.dataSources.showWeek"/>
					</a-form-item>
				</a-form>
				<!--刷新配置-->
				<refresh-config></refresh-config>
			</a-tab-pane>
		</a-tabs>
	</div>
</template>

<script>
/**
 * 实时时间
 */
import ComponentDef from "@/views/modules/design/right-component/common/component-def.js";
import RefreshConfig from "@/views/modules/design/right-component/common/refresh-config.vue"
export default {
	name: "RealTimeDef",
	mixins:[ComponentDef],
	components:{
        RefreshConfig
	},
	data() {
		return {}
	},
	created() {
	},
	methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"componentStyleLang",key);
		},
		realTimeI18n(name,text,key){
			return this.$ti18(name,text,"realTimeLang",key);
		},

	},
	watch: {}
}
</script>

<style scoped>
.componentStyle-textAlign{
	margin-top: 4px;
	display: flex;
	height: 32px;
	border-radius: 4px;
	border: solid 1px #dedede;
	align-items: center;
	justify-items: center;
}
.componentStyle-textAlign-icon{
	flex: 1;
	height: 32px;
	line-height: 32px;
	font-size: 20px;
	text-align: center;
	cursor: pointer;
	border-right: solid 1px #dedede
}
.componentStyle-textAlign-hover{
	color: #4285f4;
}
.componentStyle-textAlign-icon:hover{
	color:#4285f4;
}
.componentStyle-textAlign-icon:nth-child(3){
	border: none;
}
</style>
